<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#fd{
width:500px;
height:200px;
background:#EDF1F8;
border:2px solid #849BCA;
position:absolute;
right:0px;
bottom:0px;
}
.content{
padding:10px;
background:#849BCA;
cursor:move;
color:#FFF;
font-weight:bold;
}
</style>
</head>
<body>
<div id="fd" style="filter:alpha(opacity=100);opacity:1;">
<div class="content">移动层</div>
</div>

<script type="text/javascript">

/*-------------------------鼠标拖动---------------------*/
var od = document.getElementById("fd");
var dx, dy, mx, my, mouseD;
var odrag;
var isIE = document.all ? true: false;
document.onmousedown = function(e) {
	var e = e ? e: event;
	if (e.button == (document.all ? 1 : 0)) {
		mouseD = true;
	}
}
document.onmouseup = function() {
	mouseD = false;
	odrag = "";
	if (isIE) {
		od.releaseCapture();
		od.filters.alpha.opacity = 100;
	} else {
		window.releaseEvents(od.MOUSEMOVE);
		od.style.opacity = 1;
	}
}

//function readyMove(e){
od.onmousedown = function(e) {
	odrag = this;
	var e = e ? e: event;
	if (e.button == (document.all ? 1 : 0)) {
		mx = e.clientX;
		my = e.clientY;
		od.style.left = od.offsetLeft + "px";
		od.style.top = od.offsetTop + "px";
		if (isIE) {
			od.setCapture();
			od.filters.alpha.opacity = 50;
		} else {
			window.captureEvents(Event.MOUSEMOVE);
			od.style.opacity = 0.5;
		}

		//alert(mx);
		//alert(my);
	}
}
document.onmousemove = function(e) {
	var e = e ? e: event;

	//alert(mrx);
	//alert(e.button);
	if (mouseD == true && odrag) {
		var mrx = e.clientX - mx;
		var mry = e.clientY - my;
		od.style.left = parseInt(od.style.left) + mrx + "px";
		od.style.top = parseInt(od.style.top) + mry + "px";
		mx = e.clientX;
		my = e.clientY;

	}
}

/*-------------------------屏幕滚动---------------------*/
/*
function getPosition(){
	var top = document.documentElement.scrollTop; 
	var left = document.documentElement.scrollLeft; 
	var height = document.documentElement.clientHeight; 
	var width = document.documentElement.clientWidth;
	return {top:top,left:left,height:height,width:width};
}
*/
pageInfo=function(){
		var b=document.body,d=document.documentElement,M=Math.max;
		var backCompat=/BackCompat/i.test(document.compatMode);
		return {
			'width':M(d.scrollWidth,b.scrollWidth,b.clientWidth),
			'height':M(d.scrollHeight,b.scrollHeight,b.clientHeight),
			'cWidth':backCompat?b.clientWidth:d.clientWidth,
			'cHeight':backCompat?b.clientHeight:d.clientHeight,
			'left':M(b.scrollLeft,d.scrollLeft),'top':M(b.scrollTop,d.scrollTop)
		};
	}

//var Position = getPosition();

window.onscroll = function (){ 
	//var Position = getPosition();
	od.style.top = pageInfo().top + "px";
	//od.style.left = Position.left + "px";
}
</script>

<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
</body>
</html>